<template>
    <j-modal
        :title="title"
        :width="width"
        :visible="visible"
        switchFullscreen
        @ok="handleOk"
        :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
        @cancel="handleCancel"
        cancelText="关闭">
        <a-button @click="addInfo(customerNumber)" type="primary" icon="plus" style="margin-bottom: 10px">新增</a-button>
        <a-table
            :columns="columns"
            :data-source="dataSource"
            :expanded-row-keys.sync="expandedRowKeys"
            :pagination="false"
            :scroll="{x:true}"
            bordered
        >
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
             <a>删除</a>
          </a-popconfirm>
        </span>
        <template slot="imageSlot" slot-scope="text">
            <viewer>
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
            <img v-else v-for="(item,index) in text.split(',')" :src="getImgView(item)" :key="index"  alt=""
                 style="width: 30px;height: 25px;margin-right: 5px"/>
            </viewer>
        </template>
        </a-table>
        <customer-medical-info-modal :customerNumber = "customerNumber" ref="medicalForm"></customer-medical-info-modal>
    </j-modal>
</template>

<script>
import { deleteAction, getAction, getFileAccessHttpUrl } from '@api/manage'
import CustomerMedicalInfoModal from './modules/CustomerMedicalInfoModal'
import Webcam from 'webcamjs'

const columns = [
    {
        title: '姓名',
        dataIndex: 'userName',
        key: 'userName',
    },
    {
        title: '职务',
        dataIndex: 'duty',
        key: 'duty',
    },
    {
        title: '执业情况',
        dataIndex: 'practiceSituation',
        key: 'practiceSituation',
    },
    {
        title: '职称',
        dataIndex: 'professionalTitle',
        key: 'professionalTitle',
    },
    {
        title: '执业范围',
        dataIndex: 'scopeOfPractice',
        key: 'scopeOfPractice',
    },
    {
        title: '资格证书',
        dataIndex: 'qualificationCertificate',
        key: 'qualificationCertificate',
        scopedSlots: { customRender: 'imageSlot' }
    },
    {
        title: '资格证书编码',
        dataIndex: 'qualificationCode',
        key: 'qualificationCode',
    },
    {
        title: '获证时间',
        dataIndex: 'gettimeQualification',
        key: 'gettimeQualification',
    },
    {
        title: '执业证书',
        dataIndex: 'practisingCertificate',
        key: 'practisingCertificate',
        scopedSlots: { customRender: 'imageSlot' }
    },
    {
        title: '执业证书编号',
        dataIndex: 'practisingCode',
        key: 'practisingCode',
    },
    {
        title: '获证时间',
        dataIndex: 'gettimePractising',
        key: 'gettimePractising',
    },
    {
        title: '操作',
        dataIndex: 'action',
        align: 'center',
        key: 'action',
        scopedSlots: { customRender: 'action' }
    },
];

export default {
    components: {
        CustomerMedicalInfoModal
    },
    data() {
        return {
            title: '医院医资信息管理',
            width: '80%',
            visible: false,
            disableSubmit: false,
            dataSource : [],
            columns,
            customerNumber: null,
            expandedRowKeys: [],
        }
    },
    provide(){
        return{
            getData : this.getData
        }
    },
    methods: {
         show(cus) {
            this.visible = true;
            if(cus && cus.customerNumber){
                this.customerNumber = cus.customerNumber
            }
            this.getData()
        },
        async getData(){
            let params = {
                customerNumber : this.customerNumber
            };
            let res = await getAction('/hc/hcMedicalCare/queryPageList',params)
            if (res && res.success) {
                this.dataSource = res.result
            }
            this.expandedRowKeys = [];
        },
        /* 图片预览 */
        getImgView(text) {
            if (text && text.indexOf(',') > 0) {
                text = text.substring(0, text.indexOf(','))
            }
            return getFileAccessHttpUrl(text)
        },
        close() {
            this.$emit('close')
            this.visible = false
        },
        // 新增
        addInfo(customerNumber){
            this.$refs.medicalForm.add()
            this.$refs.medicalForm.title = '新增'
            this.$refs.medicalForm.customerNumber = customerNumber
            this.$refs.medicalForm.disableSubmit = false
        },
        handleOk() {
            this.close()
        },
        handleCancel() {
            this.close()
        },
        handleDelete: function (id) {
            let that = this;
            deleteAction('/hc/hcMedicalCare/delete', {id: id}).then((res) => {
                if (res.success) {
                    that.$message.success(res.message);
                    that.getData();
                } else {
                    that.$message.warning(res.message);
                }
            });
        },
        handleEdit(record){
            this.$refs.medicalForm.edit(record)
            this.$refs.medicalForm.title = '编辑'
            this.$refs.medicalForm.disableSubmit = false
        },
    }
}
</script>
